<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link href="../Pear-Admin-Layui/component/pear/css/pear.css" rel="stylesheet"/>
</head>
<style>
  .d {
    visibility: hidden;
  }
</style>
<body>
<body class="pear-container">
<div class="layui-card">
  <div class="layui-card-body">

    <div class="layui-form-item" style="margin: 12px;">
      <label class="layui-form-label">物品名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" placeholder="物品名称" class="layui-input">
      </div>

      <button class="pear-btn pear-btn-md pear-btn-primary" id="search">
        <i class="layui-icon layui-icon-search"></i>
        查询
      </button>
      <button class="pear-btn pear-btn-md" id="reset">
        <i class="layui-icon layui-icon-refresh"></i>
        重置
      </button>
    </div>

  </div>
</div>
<div class="layui-card">
  <div class="layui-card-header">
    卡片列表
    <button class="pear-btn pear-btn-xs" id="set">
      <i class="layui-icon layui-icon-set"></i>
    </button>
  </div>
  <div class="layui-card-body">
    <!--        <table id="user-table" lay-filter="user-table"></table>-->
    <div class="pear-card-component">

      <div class="layui-row layui-col-space30">

<!--        <div class="layui-col-md3 ew-datagrid-item">-->
<!--          <div class="project-list-item">-->
<!--            <img class="project-list-item-cover"-->
<!--                 src="https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png">-->
<!--          </div>-->
<!--          <div class="project-list-item-body">-->
<!--            <h3>物品名</h3>-->
<!--            <div class="project-list-item-text layui-text">物品简介</div>-->
<!--            <div class="project-list-item-desc" style="text-align: center">-->
<!--              <button class="pear-btn pear-btn-sm pear-btn-success d" data-id="3"> 上传</button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->



      </div>

      <div id="cardpage" style="width: 1600px;height: 70px;margin-top: 15px"></div>
    </div>
  </div>
</div>
<input type="text" name="id" style="display: none">

</body>

<script type="text/html" id="user-toolbar">
  <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
    <i class="layui-icon layui-icon-add-1"></i>
    新增
  </button>
  <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
    <i class="layui-icon layui-icon-delete"></i>
    删除
  </button>
</script>

<script type="text/html" id="user-bar">
  <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
  </button>
  <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
  </button>
</script>

<script type="text/html" id="user-enable">
  <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{
         d.enable== 0 ? 'checked' : '' }} >
</script>

<script type="text/html" id="user-sex">
  {{#if (d.sex == 1) { }}
  <span>男</span>
  {{# }else if(d.sex == 2){ }}
  <span>女</span>
  {{# } }}
</script>

<script type="text/html" id="user-login">
  {{#if (d.login == 0) { }}
  <span>在线</span>
  {{# }else if(d.sex == 1){ }}
  <span>离线</span>
  {{# } }}
</script>

<script type="text/html" id="user-createTime">
  {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>

<script src="../Pear-Admin-Layui/component/layui/layui.js"></script>
<script src="../Pear-Admin-Layui/component/pear/pear.js"></script>
<script>
  layui.use(['table', 'form', 'jquery', 'laypage', 'card', 'upload'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let card = layui.card;
    var laypage = layui.laypage;
    var upload = layui.upload;

    var count;
    // 重置
    $("#reset").on('click', function () {
      $("input[name='name']").val('');
      $("#search").trigger('click');
    })

    // 查询分页
    $("#search").on('click', function () {
      $.ajax({
        url: "/picture/list",
        type: "post",
        data: {page: 1, limit: 8, name: $("input[name='name']").val()},
        dataType: "json",
        success: function (res) {
          var html = '';
          if (res.code == 0) {
            count = res.count;
            html = spliceData(res.data);
          }
          $(".layui-col-space30").html(html);
          laypage.render({
            elem: 'cardpage' //注意，这里的 test1 是 ID，不用加 # 号
            , count: count //数据总数，从服务端得到
            , theme: '#1e9fff'
            , limit: 8
            , layout: ['prev', 'page', 'next', 'refresh']
            , jump: function (obj, first) {
              if (!first) {
                $.ajax({
                  url: "/picture/list",
                  type: "post",
                  data: {page: obj.curr, limit: obj.limit, name: $("input[name='name']").val()},
                  dataType: "json",
                  success: function (res) {
                    var html = '';
                    if (res.code == 0) {
                      count = res.count;
                      html = spliceData(res.data);
                    }
                    $(".layui-col-space30").html(html);
                    up();
                  }
                })
              }
            }
          });
          up();
        }
      })
    })


    $.ajax({
      url: "/picture/list",
      type: "post",
      data: {page: 1, limit: 8},
      dataType: "json",
      success: function (res) {
        var html = '';
        if (res.code == 0) {
          count = res.count;
          html = spliceData(res.data);
        }
        $(".layui-col-space30").html(html);
        laypage.render({
          elem: 'cardpage' //注意，这里的 test1 是 ID，不用加 # 号
          , count: count //数据总数，从服务端得到
          , theme: '#1e9fff'
          , limit: 8
          , layout: ['prev', 'page', 'next', 'refresh']
          , jump: function (obj, first) {
            if (!first) {
              $.ajax({
                url: "/picture/list",
                type: "post",
                data: {page: obj.curr, limit: obj.limit},
                dataType: "json",
                success: function (res) {
                  var html = '';
                  if (res.code == 0) {
                    count = res.count;
                    html = spliceData(res.data);
                  }
                  $(".layui-col-space30").html(html);
                  up();
                }
              })
            }
          }
        });
        up();
      }
    })

    // 到第一页
    function pageOne() {
      $.ajax({
        url: "/picture/list",
        type: "post",
        data: {page: 1, limit: 8},
        dataType: "json",
        success: function (res) {
          var html = '';
          if (res.code == 0) {
            count = res.count;
            html = spliceData(res.data);
          }
          $(".layui-col-space30").html(html);
        }
      })
    }

    // 上传
    function up() {
      var uploadInst = upload.render({
        elem: '.pear-btn-success' //绑定元素
        , url: '/picture/up' //上传接口
        , done: function (res) {
          //上传完毕回调
          if (res.code == 0) {
            layer.msg("上传成功");
            let id = $("input[name='id']").val();
            $.ajax({
              url: "/picture/insert",
              type: "post",
              data: {id: id, url: res.msg},
              dataType: "json",
              success: function (r) {
                console.log(r.msg);
                pageOne();
              }
            })
          }
        }
      });
    }

    // 返回拼接html
    function spliceData(data) {
      var html = '';
      for (let i = 0; i < data.length; i++) {
        html += "<div class=\"layui-col-md3 ew-datagrid-item\">" +
            "          <div class=\"project-list-item\">" +
            "            <img class=\"project-list-item-cover\"" +
            "                 src=" +
            data[i].address +
            ">" +
            "          </div>" +
            "          <div class=\"project-list-item-body\">" +
            "            <h3>" +
            data[i].goodName +
            "</h3>" +
            "            <div class=\"project-list-item-text layui-text\">" +
            data[i].detail +
            "</div>" +
            "            <div class=\"project-list-item-desc\" style=\"text-align: center\">" +
            "              <button class=\"pear-btn pear-btn-sm pear-btn-success d\" data-id=" +
            data[i].goodId +
            "> 上传</button>" +
            "            </div>" +
            "          </div>" +
            "        </div>";
      }
      return html;
    }

    // 展示或隐藏上传按钮
    $("#set").on('click', function () {
      if ($(".pear-btn-success").hasClass('d')) {
        $(".pear-btn-success").removeClass('d');
      } else {
        $(".pear-btn-success").addClass('d');
      }
    })

    // 点击上传将id放到input框里
    $(".layui-col-space30").on('click', '.pear-btn-success', function () {
      var id = $(this).attr('data-id');
      $("input[name='id']").val(id);
    })

  })
</script>
</body>
</html>